<template>
	<view>
		<canvas-drag ref="canvasRef" id="canvas-drag" :graph="graph" :width="700" :height="750"
			:enableUndo="true"></canvas-drag>
		<view class="btn" @tap="onAddImage">添加图片</view>
		<view class="btn" @tap="onAddTest">添加测试图片</view>
		<view class="btn" @tap="onAddText">添加文字</view>
		<view class="btn" @tap="onExport">导出图片</view>
		<view class="btn" @tap="onChangeColor">改变文字颜色</view>
		<view class="btn" @tap="onChangeBgColor">改变背景颜色</view>
		<view class="btn" @tap="onChangeBgImage">改变背景照片</view>
		<view class="btn" @tap="onExportJSON">导出模板</view>
		<view class="btn" @tap="onImport">导入默认模板</view>
		<view class="btn" @tap="onClearCanvas">清空画布</view>
		<view class="btn" @tap="onUndo">后退</view>
	</view>
</template>

<script>
	//index.js
	import canvasDrag from "@/components/canvas-drag/index";

	export default {
		data() {
			return {
				getphotoUrl: "https://easysart.oss-cn-shenzhen.aliyuncs.com/yang/guangqi/loading.png",
				canvasWidth: 750, // 根据实际图片尺寸设置
				canvasHeight: 1034,

				graph: {},
				canvasBg: "",
			};
		},

		components: {
			canvasDrag
		},
		props: {},
		onLoad(e) {
			console.log(e)
			
		},
		methods: {
			/**
			 * 添加测试图片
			 */
			onAddTest() {
				this.setData({
					graph: {
						w: 120,
						h: 120,
						type: 'image',
						url: "/static/assets/images/test.jpg"
					}
				});
			},

			/**
			 * 添加图片
			 */
			onAddImage() {
				wx.chooseImage({
					success: res => {
						
						this.setData({
							graph: {
								w: 100,
								h: 100,
								type: 'image',
								url: res.tempFilePaths[0]
							}
						});
					}
				});
			},

			/**
			 * 添加文本
			 */
			onAddText() {
				this.setData({
					graph: {
						type: 'text',
						text: 'helloworld'
					}
				});
			},

			/**
			 * 导出图片
			 */
			onExport() {
				console.log(this.$refs.canvasRef);
				this.$refs.canvasRef.export().then(filePath => {
					console.log(filePath);
					wx.previewImage({
						urls: [filePath]
					});
				}).catch(e => {
					console.error(e);
				});
				
				  this.$refs.canvasRef.exportFun().then(filePath => {  // 将export改为exportFun
				    console.log(filePath);
				    wx.previewImage({
				      urls: [filePath]
				    });
				  }).catch(e => {
				    console.error(e);
				  });
			},

			/**
			 * 改变文字颜色
			 */
			onChangeColor() {
				this.$refs.canvasRef.changColor('blue');
			},

			/**
			 * 改变背景颜色
			 */
			onChangeBgColor() {
				this.$refs.canvasRef.changeBgColor('yellow');
			},

			/**
			 * 改变背景照片
			 */
			onChangeBgImage() {
				this.$refs.canvasRef.changeBgImage(this.getphotoUrl)
			},

			/**
			 * 导出当前画布为模板
			 */
			onExportJSON() {
				this.$refs.canvasRef.exportFun().then(imgArr => {
					console.log(JSON.stringify(imgArr));
				}).catch(e => {
					console.error(e);
				});
			},

			onImport() {
				// 有背景

				// 无背景
				let temp_theme = [{
					"type": "image",
					"url": "/static/assets/images/test.jpg",
					"y": 103,
					"x": 91,
					"w": 120,
					"h": 120,
					"rotate": 0,
					"sourceId": null
				}, {
					"type": "text",
					"text": "helloworld",
					"color": "blue",
					"fontSize": 20,
					"y": 243,
					"x": 97,
					"rotate": 0
				}];
				this.$refs.canvasRef.initByArr(temp_theme);
			},

			onClearCanvas: function(event) {
				let _this = this;

				_this.setData({
					canvasBg: null
				});

				this.$refs.canvasRef.clearCanvas();
			},
			onUndo: function(event) {
				this.$refs.canvasRef.undo();
			}
		}
	};
</script>
<style>
	.btn {
		padding: 10rpx 20rpx;
		float: left;
		margin: 10rpx;
		border: solid 1px #dfdfdf;
		border-radius: 10rpx;
	}
</style>